<template>
  <div class="login-com">
    <div class="login-box">
      <!-- 头像部分 -->
      <div class="avatar_box">
        <img src="@/assets/logo.png" alt="">
      </div>
      <!-- 表单 部分 -->
      <!-- :model="ruleForm" 关联提交的数据 -->
      <!-- :rules="rules" 关联 检验规则 -->
      <!-- prop 关联属性 -->
      <el-form :model="ruleForm" status-icon label-width="0px" 
      :rules="rules" ref="ruleForm"
        class="demo-ruleForm login-form">
        <el-form-item prop="username">
          <el-input  prefix-icon="el-icon-s-custom" v-model="ruleForm.username"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" 
          prefix-icon="el-icon-message-solid" 
          v-model="ruleForm.password"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login} from '@/api/login.js'
export default {
  name: "login-com",
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
          //        必填             报错 信息            触发时机 失去焦点
        username: [{required: true, message:'请输入', trigger: 'blur'}],
        password:  [{required: true, message:'请输入', trigger: 'blur'}],
      }
    }
  },
  methods:{
     login(){

      // 当点击登录的时候 校验规则 必须满足 才能 往下进行;
      this.$refs.ruleForm.validate(async (isOk) => {        
       // 只有当 表单校验成功之后 isOk 才是 true 
        if(!isOk) return alert("校验失败!");
         // 1. 发送请求
        let {data} = await login(this.ruleForm)
        // 2.解构数据
        let {meta,data:{token}} = data;
        // 3.如果登录失败 则 弹出提示
        if(meta.status!=200) return this.$message("登录失败!")
        // 4. 登录成功提示
          this.$message.success("登录成功!")
          // 5.跳转路由
          this.$router.push('/welcome')
          // 6. 把token储存到本地
        window.localStorage.setItem("login-token",token)
        })
      },

    resetLoginForm(){
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>
<style lang="scss">
.login-com {
  width: 100vw;
  height: 100vh;
  background-color: #2b4b6b;
  position: relative;
}

.login-box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 5px;
  padding: 15px;
}

.login-form {
  position: absolute;
  width: 90%;
  bottom: 0;
}

.el-form-item__content {
  display: flex;
  justify-content: flex-end;
}

.avatar_box {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  left: 160px;
  border: 10px solid #fff;
  box-shadow: 0 0 20px #666;
  top: -65px;
  overflow: hidden;
  z-index: 1;
  background-color: #eee;

  img {
    width: 130px;
  }
}
</style>
  